<template>
  <div class="order">
    <!-- 顶部 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="订单" />
      </van-sticky>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <van-sticky :offset-top="46">
        <van-tabs v-model="active" @change="getAllOrderData">
          <van-tab name="" title="全部订单"></van-tab>
          <van-tab name="待接单" title="待接单"></van-tab>
          <van-tab name="待服务" title="待服务"></van-tab>
          <van-tab name="待确认" title="待确认"></van-tab>
          <van-tab name="已完成" title="已完成"></van-tab>
        </van-tabs>
      </van-sticky>
    </div>
    <div style="height: 20px"></div>
    <!-- 订单内容详情 -->
    <div class="box">
      <div class="content">
        <van-card
          v-for="item in orderList"
          :key="item.id"
          :thumb="item.customer.userFace"
          @click="toDetail(item)"
        >
          <template #tags>
            <van-row type="flex">
              <van-col span="18">{{ item.customer.username }}</van-col>
              <van-col style="color: #f8825d" span="6">{{
                item.status
              }}</van-col>
              <van-col span="24">{{
                item.address.province + item.address.city + item.address.address
              }}</van-col>
              <van-col span="18">{{
                new Date(item.serviceTime)
                  .toLocaleString()
                  .replace(
                    /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
                  )
              }}</van-col>
              <van-col span="6">¥{{ item.total }}</van-col>
            </van-row>
          </template>
        </van-card>
        <!-- <div class="orderImg">
        <van-image
          height="90"
          width="90"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="orderDetail">
        <van-row type="flex"
          
        >
          <van-col span="18">span: 6</van-col>
          <van-col span="6">span: 6</van-col>
          <van-col span="24">span: 6</van-col>
          <van-col span="18">span: 6</van-col>
          <van-col span="6">span: 6</van-col>
        </van-row>
        </div> -->
        <div style="height: 55px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import moment from "moment";

export default {
  data() {
    return {
      active: 0,
      orderList: {},
      status: "",
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入用户信息模块
    ...mapActions("user", ["getUserInfo"]),
    // 获取订单数据
    async getAllOrderData(name, title) {
      // console.log(name);
      let data = {
        page: 1,
        pageSize: 100,
        status: name,
        employeeId: this.userInfo.id,
      };
      for (const key in data) {
        if (!data[key]) {
          delete data[key];
        }
      }
      // console.log(data);
      let res = await get("/order/pageQuery", data);
      // console.log(res.data.data.list);
      this.orderList = res.data.data.list;
      // console.log(this.orderList);
    },
    toDetail(item) {
      console.log(item);
      this.$router.push({
        path: "/manager/orderDetail",
        query: {
          item: item,
        },
      });
    },
  },
  created() {
    this.getUserInfo().then(() => {
      this.getAllOrderData();
    });

    // this.getActive()
  },
};
</script>

<style scoped>
.box {
  height: 600px;
  box-sizing: border-box;
}
.content {
  /* display: flex; */
  height: 100%;
  width: 90%;
  height: 100px;
  margin: 0 auto;
  /* box-shadow: 0 0 6px 0 #ccc; */
}
.van-card {
  width: 100%;
  /* background: #ffffff; */
  box-shadow: 0 0 6px 0 #9932cc;
  margin-bottom: 20px;
}
.orderImg {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  margin: 5px;
}
.content .orderDetail {
  flex: 1;
  margin-left: 15px;
  box-sizing: border-box;
  padding: 10px 10px;
}
.van-col--18,
.van-col--6,
.van-col--24,
.van-col--18,
.van-col--6 {
  height: 25px;
  line-height: 25px;
}
</style>